<template>
  <div class="emailSent">
    <el-col class="emailSentConainter" :xs="18">
      <div class="markBox">
        <span>邮箱icon</span>
        <div class="title">
          <p>Your password has been reset</p>
          <p>successfully!</p>
        </div>
      </div>
      <div class="tipBox">
        <p>Use your new password to log in to your account.</p>
      </div>
      <el-button color="#00AA8B" @click="goToLogin">Go to Login</el-button>
    </el-col>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
function goToLogin() {
  router.push('/login');
}
</script>
<style scoped lang="less">
.emailSent {
  overflow: hidden;
  .emailSentConainter {
    width: 464px;
    margin: 66px auto 0;
    color: #ffffff;
    .markBox {
      text-align: center;
      span {
        margin-bottom: 17.5px;
      }
      .title {
        font-size: 28px;
      }
    }
    .tipBox {
      font-size: 15px;
      text-align: center;
      margin: 16px 0;
    }
    .el-button {
      width: 100%;
      height: 44px;
    }
  }

  @media screen and(max-width:768px) {
    .emailSentConainter {
      margin-top: 36px;
    }
  }
}
</style>
